
var imgs=[
    {"i":0,"img":"../image/iokhjs.jpg"},
    {"i":1,"img":"../image/iokhjs.jpg"},
    {"i":2,"img":"../image/iokhjs.jpg"},
    {"i":3,"img":"../image/iokhjs.jpg"},
    {"i":5,"img":"../image/iokhjs.jpg"},
    {"i":6,"img":"../image/iokhjs.jpg"},
    {"i":7,"img":"../image/iokhjs.jpg"}
];
var adv={
    LIWIDTH:0,
    $ulImgs:null,
    INTERVAL:1000,
    WAIT:3000,
    timer:null,
    init(){
        this.LIWIDTH=parseFloat(
            $(".Products_img_r li").css("width")
        );
       this.$ulImgs=$(".Products_img_r");
        this.updateView();
        $(".Products").on("click",".prev",(e)=>{
            e.preventDefault();
            this.move(1);
        });
        $(".Products").on("click",".next",(e)=>{
            e.preventDefault();
            this.move(-1)
        });
        this.autoMove();//启动自动轮播
    },
    autoMove(){
        this.timer=setTimeout(
            ()=>this.move(1),this.WAIT
        );
    },
    movePrev(n){
        n*=-1;
        imgs=imgs.splice(-n,n).concat(imgs)
        this.updateView();//更新界面
        //修改$ulImgs的left为left-n*LIWIDTH
        this.$ulImgs.css("left",
            -n*this.LIWIDTH
        );
    },
    move(n){
        clearTimeout(this.timer);
        if(n<0){
            this.movePrev(n);
            this.$ulImgs.stop(true).animate(
                {left:0},
                this.INTERVAL,
                ()=>this.autoMove()
            );
        }else{
            this.$ulImgs.stop(true).animate(
                {left:-n*this.LIWIDTH},
                this.INTERVAL,
                ()=>this.moveCallback(n)
            );
        }
    },
    moveCallback(n){
        imgs=imgs.concat(imgs.splice(0,n));
        this.updateView();
        this.$ulImgs.css("left",0);
        this.autoMove();//启动自动轮播
    },

    updateView(){for(var i=0,lis="",idxs="";
            i<imgs.length;
            i++){
            lis+=`<li><a href="${i}"><img src="${imgs[i].img}"></a></li>`
            idxs+="<li></li>"
        }
        this.$ulImgs.html(lis).css(
            "width",imgs.length*this.LIWIDTH);
        $("#indexs").html(idxs)
            .children(`li:eq(${imgs[0].i})`)
            .addClass("hover");
    }
}
adv.init();
var t=dn=0,count;
$(function(){
    count=$("#banner_list>div").length;
    $("#banner_list>div:not(:first-child)").hide();
    $("#banner li").click(function() {
        var i = $(this).text() - 1;
        dn = i;
        if (i >= count) return;
        $("#banner_list>div").filter(":visible").fadeOut(1000).parent().children().eq(i).fadeIn(1000);
        $(this).toggleClass("on");
        $(this).siblings().removeAttr("class");
    });
    t = setInterval("showAuto()", 3000);
    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
})
function showAuto(){
    dn = dn >(count - 1) ? 0 : ++dn;
    $("#banner li").eq(dn).trigger('click');
}